import { lazy, ReactNode, Suspense } from 'react'
import { Navigate, useRoutes } from 'react-router-dom'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import { hasStorage } from './utils/loaclStorage'
import { TOKEN_KEY } from './store/reducers/login'
import { Mask, SpinLoading } from 'antd-mobile'

// import Auth from './component/auth'
// 懒加载组件
const Home = lazy(() =>
  import(/*webpackChunkName:'home', webpackPrefetch:true*/ '@/pages/Home')
)
const Question = lazy(() =>
  import(
    /*webpackChunkName:'question', webpackPrefetch:true*/ '@/pages/Question'
  )
)
const Video = lazy(() =>
  import(/*webpackChunkName:'video', webpackPrefetch:true*/ '@/pages/Video')
)
const Profile = lazy(() =>
  import(/*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Profile')
)
const UserEdit = lazy(() =>
  import(
    /*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Profile/UserEdit'
  )
)
const Chat = lazy(() =>
  import(
    /*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Profile/Chat'
  )
)
const Search = lazy(() =>
  import(/*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Search')
)
const Result = lazy(() =>
  import(
    /*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Search/Result'
  )
)
const Article = lazy(() =>
  import(/*webpackChunkName:'profile', webpackPrefetch:true*/ '@/pages/Article')
)
// 异步加载组件
const lazyload = (children: ReactNode): ReactNode => {
  return (
    <Suspense
      fallback={
        <Mask visible={true}>
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)'
            }}
          >
            <SpinLoading style={{ '--size': '48px' }} />
          </div>
        </Mask>
      }
    >
      {children}
    </Suspense>
  )
}

// 路由鉴权
const auth = (children: ReactNode, redirect: string): ReactNode => {
  return hasStorage(TOKEN_KEY) ? (
    lazyload(children)
  ) : (
    <Navigate
      to='/login'
      state={{
        redirect: redirect
      }}
    />
  )
}
function App () {
  const routes: React.ReactElement | null = useRoutes([
    {
      path: '/',
      element: <Layout />,
      children: [
        {
          index: true,
          element: lazyload(<Home />)
        },
        {
          path: '/home',
          element: lazyload(<Home />)
        },
        {
          path: '/home/question',
          element: lazyload(<Question />)
        },
        {
          path: '/home/video',
          element: lazyload(<Video />)
        },
        {
          path: 'home/profile',
          element: auth(<Profile />, '/home/profile')
        }
      ]
    },
    {
      path: '/login',
      element: lazyload(<Login />)
    },
    {
      path: '/profile/edit',
      element: auth(<UserEdit />, '/profile/edit')
    },
    {
      path: '/chat',
      element: auth(<Chat />, '/chat')
    },
    {
      path: '/search',
      element: lazyload(<Search />)
    },
    {
      path: '/search/result',
      element: lazyload(<Result />)
    },
    {
      path: '/article/:id',
      element: lazyload(<Article />)
    }
  ])
  /* const RouterRules = useCallback(() => {
    return (
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />}></Route>
          <Route path='home' element={<Home />}></Route>
          <Route path='home/question' element={<Question></Question>}></Route>
          <Route path='home/video' element={<Video></Video>}></Route>
          <Route
            path='home/profile'
            element={
              hasStorage(TOKEN_KEY) ? (
                <Profile></Profile>
              ) : (
                <Navigate
                  to='/login'
                  state={
                    {
                      redirect: 'home/profile'
                    } as { redirect: string }
                  }
                />
              )
            }
          ></Route>
          <Route path='*' element={<Home />}></Route>
        </Route>
        <Route path='/login' element={<Login></Login>}></Route>
        <Route
          path='profile/edit'
          element={
            hasStorage(TOKEN_KEY) ? (
              <UserEdit></UserEdit>
            ) : (
              <Navigate
                to='/login'
                state={{
                  redirect: 'profile/edit'
                }}
              />
            )
          }
        ></Route>
      </Routes>
    )
  }, [pathname]) */
  return <div className='App'>{routes}</div>
}

export default App
